<template>
  <view class="manage-phrases-container">
    <!-- 常用语列表 -->
    <view class="phrases-list">
      <view class="phrase-item" v-for="(phrase, index) in phrases" :key="index">
        <text class="phrase-text">{{ phrase }}</text>
		<uni-icons type="compose" size="18" color="#000" ></uni-icons>
        <button class="edit-button" @click="editPhrase(index)">编辑</button>
      </view>
    </view>

    <!-- 添加常用语按钮 -->
    <view class="add-button-container">
      <button class="add-button" @click="addPhrase">添加常用语</button>
    </view>
  </view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'; // 根据实际路径调整
export default {
	components: {
	    uniIcons,
	  },
  data() {
    return {
      phrases: [] // 常用语列表
    };
  },
  onLoad() {
    // 从上一页获取常用语列表
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2]; // 获取上一页实例
    if (prevPage && prevPage.$vm) {
      this.phrases = [...prevPage.$vm.phrases]; // 复制常用语列表
    }
  },
  methods: {
    // 跳转到编辑页面
    editPhrase(index) {
      uni.navigateTo({
        url: `/pages/enterprise/edit-phrase?index=${index}&phrase=${encodeURIComponent(this.phrases[index])}`
      });
    },
    // 跳转到添加常用语页面
    addPhrase() {
      uni.navigateTo({
        url: '/pages/enterprise/add-phrase'
      });
    }
  }
};
</script>

<style scoped>
.manage-phrases-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
  background-color: #fff;
}

.phrases-list {
  flex: 1;
  overflow-y: auto;
}

.phrase-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.phrase-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.uni-icons{
	  margin-left: 8px; /* 图标与输入框的间距 */
}

.edit-button {
  font-size: 24rpx;
  color: #4d4d4d;
  background-color: transparent;
  padding: 5rpx 15rpx;
}

.edit-button::after{
	border: none;
}

.add-button-container {
  padding: 20rpx;
  background-color: #fff;
}

.add-button {
 width: 100%;
 		height: 80rpx;
 		line-height: 80rpx;
     background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
   	border-radius: 32px;
 		font-size: 32rpx;
 		color: #fff;
 		text-align: center;
 		pointer-events: auto; /* 确保用户交互正常 */
}

.add-button::after {
  border: none;
}
</style>